<template>
    <div class="not-view">
        <el-form ref="actDetailData" :model="actDetailData" label-width="120px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="活动名称：">
                        <div>{{actDetailData.actTitle}}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="活动ID：">
                        <div>{{actDetailData.actId}}</div>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="活动类型：">
                        <div>{{actDetailData.actTypeDetail}}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="加分方式：">
                        <div>{{actDetailData.signTypeDetail}}</div>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="活动描述：">
                        <div class="text-wrap" v-html="actDetailData.actContent">
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="签到二维码：" v-if="this.actDetailData.signType == '0'">
                        <el-image
                            class="qr-code"
                            :src="this.baseURL+'qrCode/'+this.actDetailData.actId+'.png'"
                            :preview-src-list="[this.baseURL+'qrCode/'+this.actDetailData.actId+'.png']"></el-image>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="活动创建人：">
                        <div>{{actDetailData.organizerName}}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="活动审批人：">
                        <div>{{actDetailData.teacherName}}</div>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="活动开始时间：">
                        <div>{{actDetailData.startTime}}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="活动结束时间：">
                        <div>{{actDetailData.endTime}}</div>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="活动审批状态：">
                        <div v-if="actDetailData.approvalStatus===0">
                            <span class="approval notApproval">{{actDetailData.approvalStatusDetail}}</span>
                        </div>
                        <div v-if="actDetailData.approvalStatus===1">
                            <span class="approval approvalAgree">{{actDetailData.approvalStatusDetail}}</span>
                        </div>
                        <div v-if="actDetailData.approvalStatus===2">
                            <span class="approval rejectApproval">{{actDetailData.approvalStatusDetail}}</span>
                        </div>
                        <div></div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="活动审批备注：">
                        {{actDetailData.approvalDesc}}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="20">
                    <el-form-item label="活动申请说明：">
                        <div>{{actDetailData.applyDesc}}</div>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item label="活动图片：">
                <div class="image-contant" v-for="item in actImgList" :key="item.id">
                    <el-image
                        style="width: 200px; height: 200px"
                        :src="item.imgPath"
                        :preview-src-list="srcList"
                        fit="contain">
                    </el-image>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'not-view',
    props: {
        actDetailData: {
            type: Object,
            default: () => { }
        },
        actImgList: {
            type: Array,
            default: () => { }
        }
    },
    data () {
        return {
            baseURL: process.env.VUE_APP_BASE_API,
        }
    },
    computed: {
        srcList () {
            let tempArr = []
            this.actImgList.forEach((item) => {
                tempArr.push(item.imgPath)
            })
            return tempArr
        }
    },
    created () {
        console.log(this.actDetailData)
    },
}
</script>

<style lang="scss" scoped>
::v-deep p {
    margin: 0;
}
.text-wrap {
    width: 100%;
    word-wrap: break-word;
    word-break: normal;
}

.image-contant {
    display: inline-block;
    box-sizing: border-box;
    width: 25%;
    text-align: center;
    padding: 0 20px;
}

.qr-code {
    width: 180px;
}

.notApproval {
    color: #e6a23c;
}
.approvalAgree {
    color: #67c23a;
}
.rejectApproval {
    color: #f56c6c;
}
</style>